<template id="myorder">
    <div>
        <div class="myorder">
            <img src="../image/dayu.jpg" alt="" @click="getMyorder()">
            <h6>我的订单</h6>
        </div>
        <div class="myorder_router">
            <div @click="is_show(1)" v-bind:class="[activeClass1]"><router-link to="/myorder/all" >全部</router-link></div>
            <div @click="is_show(2)" v-bind:class="[activeClass2]"><router-link to="/myorder/payment">待付款</router-link></div>
            <div @click="is_show(3)" v-bind:class="[activeClass3]"><router-link to="/myorder/goods">待发货</router-link></div>
            <div @click="is_show(4)" v-bind:class="[activeClass4]"><router-link to="/myorder/receipt">待收货</router-link></div>
            <div @click="is_show(5)" v-bind:class="[activeClass5]"><router-link to="/myorder/evaluate">待评价</router-link></div>
        </div>
        <router-view></router-view>

    </div>
</template>
<script>
    export default {
        name:'myorder',
		data(){
            return{
                activeClass1:'',
                activeClass2:'',
                activeClass3:'',
                activeClass4:'',
                activeClass5:'',
            }
        },
		mounted:function(){
			//初始化
			this.menu();
			
        },
        methods:{
			menu:function(){
				var url = this.$route.fullPath;
				if(url == '/myorder/all'){
					this.activeClass1='is_show'
				}
				if(url == '/myorder/payment'){
					this.activeClass2='is_show'
				}
				if(url == '/myorder/goods'){
					this.activeClass3='is_show'
				}
				if(url == '/myorder/receipt'){
					this.activeClass4='is_show'
				}
				if(url == '/myorder/evaluate'){
					this.activeClass5='is_show'
				}
			},
            getMyorder:function(){
			   this.$router.push('/center');
            },
			is_show(id){
				this.activeClass1='';
				this.activeClass2='';
				this.activeClass3='';
				this.activeClass4='';
				this.activeClass5='';
				if(id == 1){this.activeClass1 = 'is_show';}
				if(id == 2){this.activeClass2 = 'is_show';}
				if(id == 3){this.activeClass3 = 'is_show';}
				if(id == 4){this.activeClass4 = 'is_show';}
				if(id == 5){this.activeClass5 = 'is_show';}
				
				console.log();
			}
        }
    }
</script>
<style>
	.is_show{
		color: #95c84e;
		border-bottom: 2px solid #95c84e;
	}
    .myorder_router{
        height:0.63rem;
        width:100%;
        border-bottom:1px solid #cfcecd;
        display:flex;
    }
    .myorder_router div{
        flex:1;
        display:block;
        color:#444444;
        font-size:0.2rem;
        height:0.63rem;
        line-height:0.63rem;
        text-align:center;
    }
	.myorder_router a{
        flex:1;
        display:block;
        color:#444444;
        font-size:0.2rem;
        height:0.63rem;
        line-height:0.63rem;
        text-align:center;
        text-decoration:none;
    }
    .myorder{
        width:100%;
        height:0.79rem;
        border-bottom:1px solid #cfcecd;
        position:relative;
    }
    .myorder img:nth-of-type(1){
        height:0.37rem;
        width:0.3rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.25rem;
    }
    .myorder h6{
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        font-size:0.26rem;
        color:#85a45a;
    }
</style>